<!DOCTYPE html>
{% load i18n static simpletags %}
{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
<!--
   The project use: django-simpleui
   source code：
   https://github.com/newpanjing/simpleui
-->
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    {% block title %}
        <title>{{ site_title }}-{% trans 'Log in' %}</title>
    {% endblock %}
    {% block icon %}
{#        <link rel="icon" href="{% static 'admin/simpleui-x/img/favicon.png' %}">#}
    {% endblock %}

    {% include 'admin/includes/css-part.html' %}

    {% block css %}
        <link rel="stylesheet" href="{% static 'admin/simpleui-x/css/login.css' %}?_=2.1">
        <style>
            /* 科技风样式 */
            .login-decorator {
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
            }
            
            .login-main {
                background: rgba(0, 0, 0, 0.7) !important;
                border: 2px solid rgba(0, 255, 255, 0.3) !important;
                border-radius: 20px !important;
                box-shadow: 
                    0 0 30px rgba(0, 255, 255, 0.3),
                    0 0 60px rgba(0, 255, 255, 0.1),
                    inset 0 0 30px rgba(0, 255, 255, 0.05) !important;
                position: relative;
                overflow: visible !important;
                animation: loginGlow 3s ease-in-out infinite alternate;
                z-index: 50;
                pointer-events: auto;
            }
            
            @keyframes loginGlow {
                0% { box-shadow: 0 0 30px rgba(0, 255, 255, 0.3), 0 0 60px rgba(0, 255, 255, 0.1), inset 0 0 30px rgba(0, 255, 255, 0.05); }
                100% { box-shadow: 0 0 40px rgba(0, 255, 255, 0.5), 0 0 80px rgba(0, 255, 255, 0.2), inset 0 0 40px rgba(0, 255, 255, 0.1); }
            }
            
            .login-main::before {
                content: '';
                position: absolute;
                top: -2px;
                left: -2px;
                right: -2px;
                bottom: -2px;
                background: linear-gradient(45deg, 
                    rgba(0, 255, 255, 0.5), 
                    rgba(255, 0, 255, 0.5), 
                    rgba(0, 255, 0, 0.5), 
                    rgba(255, 255, 0, 0.5));
                border-radius: 20px;
                z-index: -1;
                animation: borderRotate 4s linear infinite;
                pointer-events: none;
            }
            
            @keyframes borderRotate {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
            
            .tech-header {
                color: #00ffff !important;
                font-size: 28px !important;
                font-weight: bold !important;
                text-shadow: 
                    0 0 10px #00ffff,
                    0 0 20px #00ffff,
                    0 0 30px #00ffff !important;
                animation: textGlow 2s ease-in-out infinite alternate;
                font-family: 'Orbitron', 'Arial', sans-serif !important;
                letter-spacing: 3px;
                text-transform: uppercase;
            }
            
            @keyframes textGlow {
                0% { text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff; }
                100% { text-shadow: 0 0 20px #00ffff, 0 0 30px #00ffff, 0 0 40px #00ffff; }
            }
            
            .logo img {
                filter: drop-shadow(0 0 10px #00ffff) brightness(1.2) !important;
                animation: logoFloat 3s ease-in-out infinite;
            }
            
            @keyframes logoFloat {
                0%, 100% { transform: translateY(0px); }
                50% { transform: translateY(-10px); }
            }
            
            /* 输入框科技风格 */
            .el-input {
                display: flex !important;
                align-items: center !important;
                position: relative !important;
            }
            
            .el-input__inner {
                background: rgba(0, 20, 40, 0.8) !important;
                border: 1px solid rgba(0, 255, 255, 0.5) !important;
                color: #00ffff !important;
                border-radius: 10px !important;
                transition: all 0.3s ease !important;
                padding-left: 40px !important;
                height: 45px !important;
                line-height: 45px !important;
            }
            
            .el-input__inner:focus {
                border-color: #00ffff !important;
                box-shadow: 0 0 15px rgba(0, 255, 255, 0.5) !important;
            }
            
            .el-input__inner::placeholder {
                color: rgba(0, 255, 255, 0.6) !important;
            }
            
            /* 前缀图标样式 */
            .el-input__prefix {
                position: absolute !important;
                left: 12px !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
                color: #00ffff !important;
                z-index: 110 !important;
                pointer-events: none !important;
                display: flex !important;
                align-items: center !important;
                font-size: 16px !important;
            }
            
            .el-input__prefix .el-input__icon {
                color: #00ffff !important;
                font-size: 16px !important;
            }
            
            /* 后缀图标样式（密码显示/隐藏按钮） */
            .el-input__suffix {
                position: absolute !important;
                right: 12px !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
                color: #00ffff !important;
                z-index: 110 !important;
                cursor: pointer !important;
                display: flex !important;
                align-items: center !important;
                font-size: 16px !important;
            }
            
            .el-input__suffix .el-input__icon {
                color: #00ffff !important;
                font-size: 16px !important;
                cursor: pointer !important;
                transition: color 0.3s ease !important;
            }
            
            .el-input__suffix .el-input__icon:hover {
                color: #ffffff !important;
            }
            
            /* 确保密码输入框的小眼睛图标正确显示 */
            .el-input--suffix .el-input__inner {
                padding-right: 40px !important;
            }
            
            /* 修复输入框的z-index和可见性 */
            .simpleui-input-inline {
                position: relative;
                z-index: 100;
                pointer-events: auto;
                margin-bottom: 20px;
            }
            
            .el-input {
                position: relative;
                z-index: 101;
                pointer-events: auto;
                width: 100% !important;
            }
            
            .el-input__inner {
                position: relative;
                z-index: 102 !important;
                pointer-events: auto !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }
            
            /* 按钮科技风格 */
            .el-button--primary {
                background: linear-gradient(45deg, #0066cc, #00ccff) !important;
                border: 1px solid #00ffff !important;
                border-radius: 10px !important;
                color: #ffffff !important;
                font-weight: bold !important;
                text-transform: uppercase !important;
                letter-spacing: 1px !important;
                transition: all 0.3s ease !important;
                position: relative;
                overflow: hidden;
                z-index: 103 !important;
                pointer-events: auto !important;
            }
            
            .el-button--primary::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
                transition: left 0.5s;
                z-index: -1;
            }
            
            .el-button--primary:hover::before {
                left: 100%;
            }
            
            .el-button--primary:hover {
                box-shadow: 0 0 20px rgba(0, 255, 255, 0.6) !important;
                transform: translateY(-2px) !important;
            }
            
            /* 确保登录按钮可点击 */
            .login-btn {
                position: relative;
                z-index: 104 !important;
                pointer-events: auto !important;
            }
            
            /* 错误提示科技风格 */
            .el-alert {
                background: rgba(255, 0, 0, 0.1) !important;
                border: 1px solid rgba(255, 0, 0, 0.5) !important;
                border-radius: 10px !important;
            }
            
            .el-alert__title {
                color: #ff6b6b !important;
            }
            
            /* 忘记密码链接 */
            .forgot-password {
                color: #00ffff !important;
                text-decoration: none !important;
                transition: all 0.3s ease !important;
                position: relative;
                z-index: 105 !important;
                pointer-events: auto !important;
            }
            
            .forgot-password:hover {
                color: #ffffff !important;
                text-shadow: 0 0 10px #00ffff !important;
            }
            
            /* 表单整体交互性修复 */
            .simpleui-form {
                position: relative;
                z-index: 99 !important;
                pointer-events: auto !important;
            }
            
            .simpleui-form * {
                position: relative;
                z-index: inherit !important;
                pointer-events: auto !important;
            }
            
            /* 响应式设计 */
            @media (max-width: 768px) {
                .tech-header {
                    font-size: 22px !important;
                }
                
                .login-main {
                    margin: 10px !important;
                }
            }
        </style>
        <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
    {% endblock %}
    {% block bg %}
        <style type="text/css">
            .bg {
                background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%);
                min-height: 100vh;
                padding: 20px 0;
                position: relative;
                overflow: hidden;
            }
            
            /* 科技感动画背景 */
            .bg::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: 
                    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
                    radial-gradient(circle at 40% 40%, rgba(120, 200, 255, 0.2) 0%, transparent 50%);
                animation: backgroundShift 10s ease-in-out infinite;
                z-index: 1;
                pointer-events: none;
            }
            
            @keyframes backgroundShift {
                0%, 100% { transform: translateX(0) translateY(0); }
                25% { transform: translateX(-20px) translateY(-10px); }
                50% { transform: translateX(20px) translateY(10px); }
                75% { transform: translateX(-10px) translateY(20px); }
            }
            
            /* 网格效果 */
            .bg::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-image: 
                    linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
                background-size: 100px 100px;
                animation: gridMove 20s linear infinite;
                z-index: 2;
                pointer-events: none;
            }
            
            @keyframes gridMove {
                0% { transform: translate(0, 0); }
                100% { transform: translate(100px, 100px); }
            }
        </style>
    {% endblock %}

    {% block head %}
        {# You can add code here. #}
    {% endblock %}
</head>
<body class="bg">
{% block left %}
{% endblock %}
{% block main %}
    <div class="login-decorator">
    <div class="login-main">
    {% block logo %}
        <div class="logo">
            {% if "SIMPLEUI_LOGO"|get_config %}
                <img src="{{ "SIMPLEUI_LOGO"|get_config |safe }}">
            {% else %}
                <img src="{% static 'admin/simpleui-x/img/logo.png' %}">
            {% endif %}
        </div>
    {% endblock %}

    {% block header %}
        <div class="header tech-header">最炫科技风</div>
    {% endblock %}

    {% block errors %}
        {% if form.non_field_errors %}
            {% for error in form.non_field_errors %}
                <el-alert
                        title="{{ error }}"
                        type="error">
                </el-alert>
            {% endfor %}
        {% endif %}
        {% if form.errors and not form.non_field_errors %}
            <p class="errornote">
                {% if form.errors.items|length == 1 %}
                    <el-alert title="{% trans "Please correct the error below." %}" type="error"></el-alert>
                {% else %}
                    <el-alert title="{% trans "Please correct the errors below." %}" type="error"></el-alert>
                {% endif %}
            </p>
        {% endif %}
    {% endblock %}
    {% block form %}
        <form class="simpleui-form" action="{{ app_path }}" method="post" id="login-form">
            {% csrf_token %}
            <div class="simpleui-input-inline">
                <el-input prefix-icon="fas fa-user" v-model="username" name="username"
                          placeholder="{% trans 'username' %}" autofocus></el-input>
            </div>
            <div class="simpleui-input-inline">
                <el-input prefix-icon="fas fa-lock" type="password" v-model="password" name="password"
                          @keyup.enter.native="login()"
                          placeholder="{% trans 'password' %}" show-password></el-input>
            </div>
            {% url 'admin_password_reset' as password_reset_url %}
              {% if password_reset_url %}

             <div class="password-reset-link">
                <a class="forgot-password" href="{{ password_reset_url }}">{% trans 'Forgotten your password or username?' %}</a>
              </div>
              {% endif %}
            <div class="simpleui-input-inline login-btn">
                <el-button :icon="loading?'el-icon-loading':''" @click="login()"
                           type="primary">{% trans 'Log in' %}</el-button>
            </div>

            <input type="hidden" name="next" value="{{ next }}"/>
        </form>
    {% endblock %}
    </div>
</div>
{% endblock %}
{% include 'admin/includes/js-part.html' %}
{% block login_js %}
<script type="text/javascript" src="{% static 'admin/simpleui-x/js/login.js' %}?_=3.3"></script>
<script>
// 备用登录功能
document.addEventListener('DOMContentLoaded', function() {
    // 确保表单可以正常提交
    const form = document.getElementById('login-form');
    const loginBtn = document.querySelector('.el-button--primary');
    const usernameInput = document.querySelector('input[name="username"]');
    const passwordInput = document.querySelector('input[name="password"]');
    
    // 如果Vue组件没有正常加载，使用原生方式
    if (loginBtn && !window.Vue) {
        loginBtn.addEventListener('click', function(e) {
            e.preventDefault();
            if (usernameInput.value && passwordInput.value) {
                form.submit();
            }
        });
    }
    
    // 回车键登录
    if (passwordInput) {
        passwordInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                if (usernameInput.value && passwordInput.value) {
                    form.submit();
                }
            }
        });
    }
    
    console.log('Login form initialized');
});
</script>
{% endblock %}

{% block  particles %}
    {% if 'SIMPLEUI_LOGIN_PARTICLES'|get_config != False %}
        <!--
            Close login page particles see link:
            关闭登录页粒子动画请查看：1234567890.com
            https://github.com/newpanjing/simpleui/blob/master/QUICK.md#关闭登录页粒子动画
        -->
        <style type="text/css">
            #particles-js {
                position: fixed;
                top: 0px;
                left: 0px;
                right: 0px;
                bottom: 0px;
                z-index: -1;
            }
            
            /* 科技感粒子效果增强 */
            #tech-particles {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: -2;
                pointer-events: none;
            }
            
            .tech-particle {
                position: absolute;
                width: 2px;
                height: 2px;
                background: #00ffff;
                border-radius: 50%;
                animation: floatParticle 8s linear infinite;
                box-shadow: 0 0 6px #00ffff;
            }
            
            @keyframes floatParticle {
                0% {
                    transform: translateY(100vh) rotate(0deg);
                    opacity: 0;
                }
                10% {
                    opacity: 1;
                }
                90% {
                    opacity: 1;
                }
                100% {
                    transform: translateY(-100px) rotate(360deg);
                    opacity: 0;
                }
            }
        </style>
        
        <!-- 增强科技粒子效果 -->
        <div id="tech-particles"></div>
        <script>
            // 创建科技感粒子
            function createTechParticles() {
                const container = document.getElementById('tech-particles');
                for (let i = 0; i < 50; i++) {
                    const particle = document.createElement('div');
                    particle.className = 'tech-particle';
                    particle.style.left = Math.random() * 100 + '%';
                    particle.style.animationDelay = Math.random() * 8 + 's';
                    particle.style.animationDuration = (Math.random() * 3 + 5) + 's';
                    container.appendChild(particle);
                }
            }
            
            // 页面加载完成后创建粒子
            document.addEventListener('DOMContentLoaded', createTechParticles);
        </script>
        <!-- particles.js container -->
        <div id="particles-js"></div>
        <script type="text/javascript" src="{% static 'admin/simpleui-x/particles/particles.js' %}"></script>
        <script type="text/javascript" src="{% static 'admin/simpleui-x/particles/app.js' %}"></script>
    {% endif %}
{% endblock %}

</body>
</html>
